<template>
	<div class="login">
		<div class="main">
			<h2>El-Admin 后台管理系统</h2>
			<el-input type="text" v-model="userName" placeholder="请输入用户名" size="small" prefix-icon="el-icon-user" class="input userName"></el-input>
			<el-input type="password" v-model="passWord" placeholder="请输入密码" size="small" prefix-icon="el-icon-lock" class="input passWord"></el-input>
			
			<div class="buttons clearfix">
				<el-button :type="buttonType" size="small" :icon="vcodeIcon" @click="showVerifyVcode" class="vcodeBtn">{{buttonText}}</el-button>
				<el-button type="primary" size="small" @click="login" class="loginBtn">登录</el-button>
			</div>
		</div>
		
		<!-- 验证码弹窗 -->
		<el-dialog title="验证" :visible.sync="isShowVerifyVcode" width="350px" :before-close="closeVerifyVcode">
			<slide-verify v-if="isShowVerifyVcode" :l="42" :r="10" :w="310" :h="155" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :slider-text="text" class="vcode"></slide-verify>
			
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" @click="closeVerifyVcode" size="mini">关闭弹窗</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { popUpMsg } from "@/utils/util"
	
	export default {
		name: "Login",
		data() {
			return {
				userName: "",																			// 用户名
				passWord: "",																			// 密码
				buttonType: "warning",																	// 验证的按钮 type 类型
				buttonText: "点击登录验证！",																// 验证的按钮文本内容
				vcodeIcon: "",																			// 验证的按钮 icon 图标
				text: "向右滑",																			// 验证码滑块滑动方向
				isVerify: false,																		// Boolean，根据这个值判断是否验证成功
				
				// 验证码弹窗
				isShowVerifyVcode: false,																// 控制验证码弹窗显示，默认不显示
			}
		},

		methods: {
			// 显示验证码弹窗
			showVerifyVcode () {
				let that = this;
				
				if (that.isVerify) {
					popUpMsg("warning", "验证已通过，无需重复验证！", 3000);
					return false;
				}
				
				that.isShowVerifyVcode = true;
			},
			
			// 关闭验证码弹窗
			closeVerifyVcode () {
				this.isShowVerifyVcode = false;
			},
			
			// 验证码匹配成功的回调
			onSuccess () {
				this.buttonType = "success";
				this.buttonText = "验证成功！";
				this.vcodeIcon = "el-icon-check";
				this.isVerify = true;
				this.isShowVerifyVcode = false;
				
				popUpMsg("success", "验证成功！", 2000);
			},

			// 验证码未匹配的回调
			onFail () {
				this.buttonType = "danger";
				this.buttonText = "验证失败，重新验证！";
				this.vcodeIcon = "el-icon-close";
				this.isVerify = false;
				this.isShowVerifyVcode = false;
				
				popUpMsg("error", "验证失败！", 3000);
			},

			// 刷新按钮的回调
			onRefresh () {
				this.buttonType = "warning";
				this.buttonText = "点击登录验证！";
				this.vcodeIcon = "";
				this.isVerify = false;
			},
			
			// 登录
			login () {
				let that = this;
				
				if (that.userName == "") {
					popUpMsg("warning", "用户名不得为空！", 3000);
				} else if (that.passWord == "") {
					popUpMsg("warning", "密码不得为空！", 3000);
				} else if (!that.isVerify) {
					popUpMsg("warning", "请先校验登录验证码！", 3000);
				} else {
					that.isVerify = false;//登录成功后，重置一下
					popUpMsg("success", "登录成功！", 2000);
					setTimeout(() => {
						that.$router.push({
							path: "/Home"
						})
					}, 2000);
				}
			}
		}
	}
</script>

<style>
	@import "../../assets/css/common.css";
	@import "../../assets/css/login.css";
</style>
